<template>
  <div>
    <myNavbar title="转让系统"></myNavbar>
    <div class="notice">
      <div class="notice-image-wrpa">
        <img class="notice-image" src="https://www.qmin365.cn/addons/ewei_shopv2/plugin/zlepai/static/images/icon_gg.png">
      </div>
      <div class="notice-text-wrap" id="div1">
          <text class="notice-text" id="span1">京小东转让系统，便民服务站可转让，不可退。</text>
      </div>
    </div>
    <div class="banner">
      <div class="banner-top">
       <div class="banner-imag-wrap">
        <div class="banner-imag-wrap">
          <img class="banner-imag"  src="https://www.qmin365.cn/addons/ewei_shopv2/static/images/noface.png">
        </div>
      </div>
      </div>
      <div class="banner-middle">
        <div class="banner-name"> <text class="banner-name-text">chen</text> </div>
      </div>
      <div class="banner-lower">
        <div class="banner-level">
          <div > <text class="banner-level-text" >[会员6876868]</text></div>
          <div class="banner-record"  @click="toRewardRecord"> <text class="banner-level-text">记录</text></div>
        </div>
      </div>
      <div class="banner-search">
        <div class="search_content">
          <!-- <text @click="cancelClick" style="padding-right:40px;" class="iconfont .icon-fanhui"></text> -->
          <div class="search_input_content">
            <text class="icon">&#xe62f;</text>
            <input placeholder="输入活动编号搜索" v-model="goods" class="search_input" @input="searchGoods" :goods="goods"
                   return-key-type="search" @return="bindconfirm" :keyboard="keyUp" @focus="isFocus" @blur="isBlur"></input>
            <div class="icon_cancel" @click="empty" v-if="goods!=''">
              <text class="icon">&#xe6ce;</text>
            </div>
          </div>
        </div>

      </div>
    </div>
    <list>
      <cell class="contain">
        <div class="contain-item">
          <div class="contain-item-wrap">
            <img  class="contain-item-wrap-image" src="https://www.qmin365.cn/attachment/images/9/2021/11/lAG0eE97ASrT9e97KkhVUadk0ks590.png">
          </div>
          <div class="contain-item-title margin-top10 pading-left-right">
            <text class="contain-item-title-text">京小东服务站</text>
          </div>
          <div class="contain-item-price margin-top10 pading-left-right">
            <text class="contain-item-price-text">价格:1000</text>
          </div>
          <div class="contain-item-NumberSessions margin-top10 pading-left-right">
            <text class="contain-item-numberSessions-text">场次:上午场</text>
          </div>
          <div class="contain-item-NumberSessions margin-top10 pading-left-right" style="margin-bottom: 20px">
            <text class="contain-item-numberSessions-text">编号:34</text>
          </div>
        </div>
        <div class="contain-item">
          <div class="contain-item-wrap">
            <img  class="contain-item-wrap-image" src="https://www.qmin365.cn/attachment/images/9/2021/11/lAG0eE97ASrT9e97KkhVUadk0ks590.png">
          </div>
          <div class="contain-item-title margin-top10 pading-left-right">
            <text class="contain-item-title-text">京小东服务站</text>
          </div>
          <div class="contain-item-price margin-top10 pading-left-right">
            <text class="contain-item-price-text">价格:1000</text>
          </div>
          <div class="contain-item-NumberSessions margin-top10 pading-left-right">
            <text class="contain-item-numberSessions-text">场次:上午场</text>
          </div>
          <div class="contain-item-NumberSessions margin-top10 pading-left-right" style="margin-bottom: 20px">
            <text class="contain-item-numberSessions-text">编号:34</text>
          </div>
        </div>
        <div class="contain-item">
          <div class="contain-item-wrap">
            <img  class="contain-item-wrap-image" src="https://www.qmin365.cn/attachment/images/9/2021/11/lAG0eE97ASrT9e97KkhVUadk0ks590.png">
          </div>
          <div class="contain-item-title margin-top10 pading-left-right">
            <text class="contain-item-title-text">京小东服务站</text>
          </div>
          <div class="contain-item-price margin-top10 pading-left-right">
            <text class="contain-item-price-text">价格:1000</text>
          </div>
          <div class="contain-item-NumberSessions margin-top10 pading-left-right">
            <text class="contain-item-numberSessions-text">场次:上午场</text>
          </div>
          <div class="contain-item-NumberSessions margin-top10 pading-left-right" style="margin-bottom: 20px">
            <text class="contain-item-numberSessions-text">编号:34</text>
          </div>
        </div>
        <div class="contain-item">
          <div class="contain-item-wrap">
            <img  class="contain-item-wrap-image" src="https://www.qmin365.cn/attachment/images/9/2021/11/lAG0eE97ASrT9e97KkhVUadk0ks590.png">
          </div>
          <div class="contain-item-title margin-top10 pading-left-right">
            <text class="contain-item-title-text">京小东服务站</text>
          </div>
          <div class="contain-item-price margin-top10 pading-left-right">
            <text class="contain-item-price-text">价格:1000</text>
          </div>
          <div class="contain-item-NumberSessions margin-top10 pading-left-right">
            <text class="contain-item-numberSessions-text">场次:上午场</text>
          </div>
          <div class="contain-item-NumberSessions margin-top10 pading-left-right" style="margin-bottom: 20px">
            <text class="contain-item-numberSessions-text">编号:34</text>
          </div>
        </div>
        <div class="contain-item">
          <div class="contain-item-wrap">
            <img  class="contain-item-wrap-image" src="https://www.qmin365.cn/attachment/images/9/2021/11/lAG0eE97ASrT9e97KkhVUadk0ks590.png">
          </div>
          <div class="contain-item-title margin-top10 pading-left-right">
            <text class="contain-item-title-text">京小东服务站</text>
          </div>
          <div class="contain-item-price margin-top10 pading-left-right">
            <text class="contain-item-price-text">价格:1000</text>
          </div>
          <div class="contain-item-NumberSessions margin-top10 pading-left-right">
            <text class="contain-item-numberSessions-text">场次:上午场</text>
          </div>
          <div class="contain-item-NumberSessions margin-top10 pading-left-right" style="margin-bottom: 20px">
            <text class="contain-item-numberSessions-text">编号:34</text>
          </div>
        </div>
      </cell>
    </list>





    <div class="dialog">
    </div>

  </div>
</template>

<script>

import myNavbar from "./components/myNavbar/myNavbar.vue";

export default {
  name: "transferSystem",
  data(){
    return{
    }
  },
  components: { myNavbar },
  mounted(){
   
  },
  methods:{
    toRewardRecord(){
      eeui.openPage({
        url: 'root://pages/member/transferSystem/rewardRecord.js',
        statusBarType: 'immersion',
        statusBarStyle: false
      })
    },

  }




}


</script>

<style scoped>
.notice{
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 750px;
  height: 80px;
  background-color: rgba(248, 248, 248, 1);
}
.notice-image{
  width: 40px;
  height: 40px;
}
.notice-text-wrap{
  overflow: hidden;
}

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}



.banner{
  padding:24px 24px;
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
  width: 750px;
  /*height: 280px;*/
  background-color:#fd0808;
}
.banner-top{
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
}
.banner-middle{
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
}
.banner-lower{
  display: flex;
  flex-direction: column;
}
.banner-imag-wrap{
  width:150px;
  height: 150px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 150px;
}
.banner-imag{
  width: 130px;
  height: 130px;
  border-radius: 130px;
}
.banner-name-text{
  font-size:32px;
  color: white;
}
.banner-level{
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
}
.banner-level-text{
  padding: 5px 0;
  font-size:32px;
  color: white;
}
.banner-record{
  position: absolute;
  right: 0;
  top: 0;
}
.contain{
  padding: 20px 20px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}
.contain-item{
  margin-bottom: 20px;
  /*padding: 0 20px;*/
  /*width:355px;*/
  width:345px;
  /*height: 600px;*/
  overflow: hidden;


  border-top-style: solid;
  border-top-width: 1px;
  border-top-color:#B8B3AD;

  border-left-style: solid;
  border-left-width: 1px;
  border-left-color:#B8B3AD;

  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color:#B8B3AD;

  border-right-style: solid;
  border-right-width: 1px;
  border-right-color:#B8B3AD;
  border-radius: 32px;
}
.contain-item-wrap{
  border-top-right-radius: 32px;
  border-top-left-radius: 32px;
  /*border-radius: 32px;*/
}
.contain-item-wrap-image{
  /*border-radius: 32px;*/
  border-top-right-radius: 32px;
  border-top-left-radius: 32px;
  width: 350px;
  height: 350px;
}
.contain-item-bottom{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 20px;
}
.contain-item-bottom-button{
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color:#B8B3AD;

  border-left-style: solid;
  border-left-width: 1px;
  border-left-color:#B8B3AD;

  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color:#B8B3AD;

  border-right-style: solid;
  border-right-width: 1px;
  border-right-color:#B8B3AD;
  border-radius: 32px;
}
.contain-item-bottom-button-text{
  padding: 5px 60px;
  font-size: 32px;
}
.contain-item-title-text{
  font-size: 30px;
}
.contain-item-price-text{
  font-size: 30px;
  color: red;
}
.contain-item-numberSessions-text{
  font-size: 30px;
}
.margin-top10{
  margin-top: 15px;
}
.pading-left-right{
  padding: 0px 20px;
}

.search_content {
  width: 700px;
  flex-direction: row;
  display: flex;
  margin-left: 20px;
  padding-right: 30px;
  height: 90px;
  align-items: center;
}
.search_input_content {
  padding-left: 20px;
  /*width: 700px;*/
  width: 670px;
  height: 64px;
  background-color: white;
  opacity: 0.95;
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(212, 215, 220, 1);
}
.search_input {
  /*width: 545px;*/
  width: 520px;
  height: 64px;
  margin-left: 0px;
  font-size: 28px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  opacity: 0.89;
}
.icon_cancel {
  color: #D4D7DC;
  margin-left: 30px;
  opacity: 0.95;
}
.icon {
  font-family: iconfont2;
  margin-top: 15px;
  width: 50px;
  height: 50px;
  font-size: 39px;
  color: rgba(42, 42, 54);
  opacity: 0.3;
}
.banner-search{
  margin-top: 20px;
}



</style>
